<template>
  <div class="root">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="5"></el-tab-pane>
      <el-tab-pane label="待付款订单" name="0"></el-tab-pane>
      <el-tab-pane label="待发货订单" name="1"></el-tab-pane>
      <el-tab-pane label="已发货订单" name="2"></el-tab-pane>
      <el-tab-pane label="已完成订单" name="3"></el-tab-pane>
      <el-tab-pane label="已关闭订单" name="4"></el-tab-pane>
    </el-tabs>
    <el-card shadow="never">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="100"
        label-position="left"
      >
        <el-form-item label="平台订单编号">
          <el-input
            v-model="formInline.orderNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品货号">
          <el-input
            v-model="formInline.productCode"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名">
          <el-input
            v-model="formInline.receiverName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="" class="newFormItem">
          <div class="btnBoxs">
            <div class="resetBtn" @click="chongzhi">
              <i class="el-icon-refresh-right"></i>
              重置
            </div>
            <div class="queryBtn" @click="selectAllByParams">
              <i class="el-icon-search"></i>
              查询
            </div>
          </div>
        </el-form-item>
        <el-form-item label="收货人手机号">
          <el-input
            v-model="formInline.receiverPhone"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递单号">
          <el-input
            v-model="formInline.trackingNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="下单时间" class="timeBox">
          <el-date-picker
            v-model="formInline.orderTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="店铺 ">
          <el-select v-model="formInline.storeName" :clearable="true">
            <el-option
              v-for="(item, index) in storeList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺订单编号">
          <el-input
            v-model="formInline.storeOrderNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="收件省份">
          <el-select
            v-model="formInline.addresseeProvince"
            :clearable="true"
            style="width: 100%"
          >
            <el-option
              :label="item.name"
              :value="item.name"
              v-for="(item, index) in options"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px">
      <div class="tableBox">
        <div class="ImportBox" @click="exportExcel">导出订单</div>
        <div class="tableHeder">
          <el-row :gutter="20">
            <el-col :span="1"
              ><div class="grid-content bg-purple">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
              </div></el-col
            >
            <el-col :span="5"
              ><div class="grid-content bg-purple">商品</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple">单价</div></el-col
            >
            <el-col :span="2"
              ><div class="grid-content bg-purple">数量</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple">商品操作</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple">实付金额</div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content bg-purple">交易状态</div></el-col
            >
            <el-col :span="5"
              ><div class="grid-content bg-purple">操作</div></el-col
            >
          </el-row>
        </div>
        <div class="tableCell">
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
          </el-checkbox-group>
          <template v-if="list?.length">
            <div class="cellList" v-for="(item, index) in list" :key="index">
              <div class="cellHeader">
                <div class="cellLeft">
                  <el-checkbox v-model="item.checked" :label="item">{{
                    " 平台订单编号:"
                  }}</el-checkbox>
                  <!-- 平台订单编号: -->
                  <div class="dataBox">{{ item.orderNumber }}</div>
                  <div class="dataBox newDataBox">
                    创建时间：{{ item.orderTime }}
                  </div>
                </div>
                <div class="dataBox">
                  {{ item.receiverName }} - {{ item.receiverPhone }} -{{
                    item.receiverProvince
                  }}
                  - {{ item.receiverCity }} - {{ item.receiverRegion }} -
                  {{ item.receiverDetail }}
                </div>
              </div>
              <div class="tableContent">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <template v-for="item1 in item.productDetailList">
                      <div style="margin-bottom: 0.1rem">
                        <el-row :gutter="20">
                          <el-col :span="9"
                            ><div class="grid-content bg-purple">
                              <div
                                class="shopsData"
                                @click="
                                  $router.push({
                                    path: '/detail',
                                    query: {
                                      id: item1.productId,
                                    },
                                  })
                                "
                              >
                                <img :src="item1.img" class="newImg" alt="" />
                                <div class="shopsDataBox">
                                  <div class="nameBox">{{ item1.name }}</div>
                                  <div class="Model">
                                    商品货号：{{ item1.code }}
                                  </div>
                                  <div class="Model">
                                    颜色：{{ item1.sku.color }} 尺码：{{
                                      item1.sku.size
                                    }}
                                  </div>
                                </div>
                              </div>
                            </div></el-col
                          >
                          <el-col :span="3"
                            ><div class="grid-content bg-purple">
                              <div class="price">￥{{ item1.price }}</div>
                            </div></el-col
                          >
                          <el-col :span="3"
                            ><div class="grid-content bg-purple">
                              <div class="price">{{ item1.quantity }}</div>
                            </div>
                          </el-col>
                          <el-col :span="3"
                            ><div class="grid-content bg-purple">
                              <el-button
                                v-if="item1.status == 1"
                                type="text"
                                @click="handleReceive(item1)"
                                >确认收货</el-button
                              >
                              <template v-else>-</template>
                            </div></el-col
                          >
                          <el-col :span="6"
                            ><div class="grid-content bg-purple">
                              <div class="ActualPayment">
                                {{ item.totalPrice }}元
                                <span class="price">
                                  (商品费用{{ item1.price }}元，快递费{{
                                    item.freightPrice
                                  }}元，服务费{{ item.servePrice }}元）
                                </span>
                              </div>
                            </div></el-col
                          >
                        </el-row>
                      </div>
                    </template>
                  </el-col>
                  <el-col :span="3"
                    ><div class="grid-content bg-purple">
                      <!--  0->待付款:1->待发货: 2->已发货:3->已完成:4->已关闭: 5->无效订单:6->售后订单;7->退款完成 -->
                      {{
                        item.status == 0
                          ? "待付款"
                          : item.status == 1
                          ? "待发货"
                          : item.status == 2
                          ? "已发货"
                          : item.status == 3
                          ? "已完成"
                          : item.status == 4
                          ? "已关闭"
                          : item.status == 5
                          ? "无效订单"
                          : item.status == 6
                          ? "售后订单"
                          : item.status == 7
                          ? "退款完成"
                          : ""
                      }}
                    </div></el-col
                  >
                  <el-col :span="5"
                    ><div class="grid-content bg-purple">
                      <div class="Controls">
                        <div class="conteolsLeft">
                          <el-button
                            type="text"
                            v-if="item.status == 0"
                            @click="handlePay(item)"
                            >立即付款</el-button
                          >
                          <el-button
                            type="text"
                            v-if="item.status == 0"
                            @click="handleClose(item)"
                            >关闭订单</el-button
                          >
                          <el-button type="text" @click="orderDetail(item)"
                            >订单详情</el-button
                          >
                        </div>
                        <img
                          @click="openRemark(item)"
                          :src="getDifferentImag(item.level)"
                          class="qiziImg"
                          alt=""
                        />
                      </div></div
                  ></el-col>
                </el-row>
              </div>
            </div>
          </template>
          <el-empty v-else></el-empty>
        </div>
      </div>
      <div class="pagingBox">
        <PaginationView :total="total" @change="fenye"></PaginationView>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">订单备忘</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px">
        <div class="Markers">
          标记
          <el-radio-group v-model="currentObj.level">
            <el-radio :label="1">
              <img
                src="../../../../static/Imgs/userImg/hongqi.png"
                alt=""
                class="newQizi"
            /></el-radio>
            <el-radio :label="2">
              <img
                src="../../../../static/Imgs/userImg/huangqi.png"
                alt=""
                class="newQizi"
            /></el-radio>
            <el-radio :label="3">
              <img
                src="../../../../static/Imgs/userImg/lvqi.png"
                alt=""
                class="newQizi"
            /></el-radio>
            <el-radio :label="4">
              <img
                src="../../../../static/Imgs/userImg/lanqi.png"
                alt=""
                class="newQizi"
            /></el-radio>
            <el-radio :label="5">
              <img
                src="../../../../static/Imgs/userImg/ziqi.png"
                alt=""
                class="newQizi"
            /></el-radio>
          </el-radio-group>
        </div>
        <el-input
          style="margin-top: 20px"
          type="textarea"
          :autosize="{ minRows: 6 }"
          placeholder="请输入内容"
          v-model="currentObj.remarks"
        >
        </el-input>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
        <el-button type="primary" class="hongBtn" @click="sureRemarkChange">
          确定</el-button
        >
      </div>
    </el-dialog>
    <order-detail ref="orderDetailRef"></order-detail>
  </div>
</template>

<script>
import {
  selectStoreNAmByParams,
  getOrderList,
  editOrderLevel,
  editOrderStatus,
  orderDownd,
  postCloseOrder,
  postReceiveGoods,
} from "@/api/OrderManagement";
import { selectAllAddress } from "@/api/shopDetail";
import orderDetail from "../component/orderDetailDialog.vue";
export default {
  data() {
    return {
      total: 0,
      textarea2: "",
      radio: "1",
      activeName: "5",
      dialogVisible: false,
      formInline: {
        pageNumber: 1,
        pageSize: 10,
      },
      currentObj: {
        level: null,
        remarks: "",
      },
      form: {},
      checkAll: false,
      isIndeterminate: false,
      checkedCities: [],
      list: [],
      options: [],
      storeList: [],
    };
  },
  components: {
    orderDetail,
  },
  created() {
    this.selectAllAddress();
    this.selectStoreNAmByParams();
    this.selectAllByParams();
  },
  activated() {
    this.selectAllByParams();
    // this.selectAllAddress();
  },
  methods: {
    handleClick(tab, event) {
      console.log("status", tab.name);
      this.formInline.status = tab.name == "5" ? "" : parseInt(tab.name);
      this.selectAllByParams();
    },
    handlePay(item) {
      this.$router.push({
        path: "/PayOrder",
        query: {
          id: item.id,
        },
      });
    },
    handleReceive(item) {
      this.$confirm("确认收货吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        postReceiveGoods(item.id).then((res) => {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.getOrderDetailChange(this.currentObject.id);
        });
      });
    },
    handleClose(item) {
      this.$confirm("确认关闭订单？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postCloseOrder(item.id).then((res) => {
            if (res.code == 200) {
              this.$message.success("关闭成功");
              this.selectAllByParams();
            }
          });
        })
        .catch((e) => e);
    },
    // 分页
    fenye(val) {
      console.log("分页事件", val);
      this.formInline.pageNumber = val.currentPage;
      this.formInline.pageSize = val.limit;
      this.selectAllByParams();
    },
    sureRemarkChange() {
      const params = {
        id: this.currentObj.id,
        level: this.currentObj.level,
        remarks: this.currentObj.remarks,
      };
      editOrderLevel(params).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.$message.success("修改成功");
          this.selectAllByParams();
        }
      });
    },
    // imgage 路径选择
    getDifferentImag(level) {
      if (level == 1) {
        return require("@/static/Imgs/userImg/hongqi.png");
      } else if (level == 2) {
        return require("@/static/Imgs/userImg/huangqi.png");
      } else if (level == 3) {
        return require("@/static/Imgs/userImg/lvqi.png");
      } else if (level == 4) {
        return require("@/static/Imgs/userImg/lanqi.png");
      } else if (level == 5) {
        return require("@/static/Imgs/userImg/ziqi.png");
      } else {
        return require("@/static/Imgs/userImg/qizi.png");
      }
    },
    // 导出订单
    exportExcel() {
      orderDownd(this.formInline).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "订单信息.xlsx");
        document.body.appendChild(link);
        link.click();
      });
    },

    // 获取所有店铺
    selectStoreNAmByParams() {
      selectStoreNAmByParams().then((data) => {
        this.storeList = data.data;
      });
    },
    // 获取省市区地址
    selectAllAddress() {
      selectAllAddress().then((data) => {
        this.options = data.data;
      });
    },
    // 订单详情
    orderDetail(row) {
      this.$refs.orderDetailRef.showDialog(true, row);
    },
    // 重置
    chongzhi() {
      this.formInline = {
        pageNumber: 1,
        pageSize: 10,
        status: " ",
        orderNumber: "",
        productCode: "",
        receiverName: "",
        receiverPhone: "",
        trackingNumber: "",
        orderTime: [],
        addresseeProvince: "",
        storeOrderNumber: "",
        storeName: "",
      };
      this.selectAllByParams();
    },
    openRemark(item) {
      this.dialogVisible = true;
      this.currentObj = item;
      console.log("当前对象", this.currentObj);
    },
    // 获取订单列表
    selectAllByParams() {
      getOrderList(this.formInline).then((res) => {
        this.list =
          res?.data?.list.map((item) => {
            item.productDetailList?.forEach((i) => (i.sku = JSON.parse(i.sku)));
            return {
              ...item,
              checked: false,
            };
          }) || [];
        this.total = res.data.total;
      });
    },
    handleCheckAllChange(val) {
      this.list.forEach((item) => {
        item.checked = val;
      });
    },
    handleCheckedCitiesChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped lang="scss">
.root {
  font-size: 12px;
  /deep/ .el-tabs__content {
    display: none;
  }
  /deep/ .el-tabs__item.is-active {
    color: #e22a1f;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e22a1f;
  }
  /deep/ .el-tabs__item:hover {
    color: #e22a1f;
  }
  /deep/ .el-input__inner {
    border: none;
    background-color: #f5f7f9;
  }
  /deep/ .el-range-input {
    background-color: #f5f7f9;
  }
  /deep/ .el-form-item {
    background: #f5f7f9;
    padding: 0 10px;
    border-radius: 2px;
    margin-right: 40px;
    width: 23%;
  }
  /deep/ .newFormItem {
    background: #fff;
    width: 10%;
    margin-right: 0;
    .el-form-item__content {
      width: 100%;
    }
  }
  .btnBoxs {
    display: flex;
    justify-content: center;
    cursor: pointer;
    .resetBtn {
      width: 7vw;
      border-radius: 2px;
      text-align: center;
      color: #666;
      font-size: 0.7vw;
      background-color: #f5f7f9;
    }
    .queryBtn {
      border-radius: 2px;
      text-align: center;
      width: 7vw;
      color: #fff;
      font-size: 0.7vw;
      background: #e22a1f;
      margin-left: 20px;
    }
  }
  .el-radio-group {
    display: flex;
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
  .tableBox {
    .ImportBox {
      background: #07c160;
      width: 104px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      color: #fff;
      cursor: pointer;
    }
    .tableHeder {
      margin-top: 20px;
      background: #ebeff5;
      padding: 12px;
      font-size: 14px;
    }
    .tableCell {
      margin-top: 20px;
      .cellHeader {
        background: #f5f7f9;
        padding: 12px;
        display: flex;
        justify-content: space-between;
        .cellLeft {
          display: flex;
          align-items: center;
        }
        .dataBox {
          font-size: 14px;
          color: #666666;
          margin-left: 10px;
        }
        .newDataBox {
          margin-left: 50px;
        }
      }
      .tableContent {
        padding: 15px;
        font-size: 14px !important;
        .shopsData {
          display: flex;
          .newImg {
            width: 80px;
            height: 80px;
            border-radius: 10px;
          }
          .shopsDataBox {
            margin-left: 10px;
            .nameBox {
              font-size: 14px;
            }
            .Model {
              color: #999999;
              margin-top: 12px;
              font-size: 12px;
            }
          }
        }
        .price {
          color: #666666;
        }
        .ActualPayment {
        }
        .Controls {
          display: flex;
          justify-content: space-between;
          /deep/ .el-button {
            display: block;
            margin-left: 0;
          }
          .qiziImg {
            width: 24px;
            height: 24px;
            margin-right: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .pagingBox {
    display: flex;
    justify-content: center;
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  /deep/ .el-form-item__content {
    width: 57%;
  }
  .root {
    font-size: 12px;
    /deep/ .el-tabs__item.is-active {
      color: #e22a1f;
    }
    /deep/ .el-tabs__active-bar {
      background-color: #e22a1f;
    }
    /deep/ .el-tabs__item:hover {
      color: #e22a1f;
    }
    /deep/ .el-input__inner {
      border: none;
      background-color: #f5f7f9;
    }
    /deep/ .el-range-input {
      background-color: #f5f7f9;
    }
    /deep/ .el-form-item {
      background: #f5f7f9;
      padding: 0 10px;
      border-radius: 2px;
      margin-right: 40px;
      width: 19%;
    }
    /deep/ .newFormItem {
      background: #fff;
      width: 21%;
      margin-right: 0;
    }
    /deep/ .timeBox {
      width: 40%;
    }
    .btnBoxs {
      display: flex;
      justify-content: center;
      cursor: pointer;
      .resetBtn {
        width: 5vw;
        border-radius: 2px;
        text-align: center;
        color: #666;
        font-size: 0.7vw;
        background-color: #f5f7f9;
      }
      .queryBtn {
        border-radius: 2px;
        text-align: center;
        width: 5vw;
        color: #fff;
        font-size: 0.7vw;
        background: #e22a1f;
        margin-left: 20px;
      }
    }
    /deep/ .el-date-editor--daterange.el-input__inner {
      width: 250px;
    }
    .tableBox {
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      .shopsData {
        display: flex;
        .newImg {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .shopsDataBox {
          margin-left: 10px;
          .nameBox {
            font-size: 14px;
          }
          .Model {
            color: #999999;
            margin-top: 8px;
            font-size: 12px;
          }
        }
      }
      .lvBox {
        color: #07c160;
      }
      .hongBox {
        color: #e22a1f;
      }
    }
    .pagingBox {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
